<template>
  <div class="common-container">
    <div class="task-manage-container">
      <el-card style="margin-bottom: 10px; padding-bottom: 0">
        <!-- 搜索区域 -->
        <div class="search-line">
          <div>
            <el-date-picker style="width: 240px;" size="small" v-model="sectimes" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <div>
            <el-select size="small" v-model="search.media_ids" multiple collapse-tags filterable clearable placeholder="应用" @focus="getappall">
              <el-option v-for="(item,key) in app_all" :label="item.name" :key="key" :value="item.id"></el-option>
            </el-select>
          </div>
          <div>
            <el-button size="small" type="primary" :disabled="isSubS" @click="GetList" icon="el-icon-search">搜索</el-button>
          </div>
        </div>
      </el-card>
      <!-- 列表区域 -->
      <el-table size="small" border :data="tableData" class="my-table" style="width: 100%; overflow: auto;">
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="media_name" label="应用"></el-table-column>
        <el-table-column prop="slot_name" label="位置"></el-table-column>
        <el-table-column prop="req" sortable label="请求"></el-table-column>
        <el-table-column prop="fill" sortable label="填充"></el-table-column>
        <el-table-column prop="fill_rate" sortable label="填充率(%)">
          <template slot-scope="scope">
            {{ scope.row.req && scope.row.fill ? parseFloat(((scope.row.fill/scope.row.req)*100).toFixed(2))  :0.00  }}
          </template>
        </el-table-column>
        <el-table-column prop="pv" sortable label="曝光"></el-table-column>
        <el-table-column prop="pv_rate" sortable label="曝光率(%)">
          <template slot-scope="scope">
            {{ scope.row.pv && scope.row.fill ? parseFloat(((scope.row.pv/scope.row.fill)*100).toFixed(2)): 0.00    }}
          </template>
        </el-table-column>
        <el-table-column prop="click" sortable label="点击"></el-table-column>
        <el-table-column prop="click_rate" sortable label="点击率(%)">
          <template slot-scope="scope">
            {{ scope.row.pv && scope.row.click ? parseFloat(((scope.row.click/scope.row.pv)*100).toFixed(2)) :  0.00   }}
          </template>
        </el-table-column>
        <el-table-column prop="deeplink" sortable label="唤醒"></el-table-column>
        <el-table-column prop="deeplink_rate" sortable label="唤醒率(%)">
          <template slot-scope="scope">
            {{ scope.row.deeplink && scope.row.click ? parseFloat(((scope.row.deeplink/scope.row.click)*100).toFixed(2))  : 0.00   }}
          </template>
        </el-table-column>
        <el-table-column prop="cost" sortable label="金额(元)">
          <template slot-scope="scope">
            {{ scope.row.cost ? scope.row.cost :  0.00  }}
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:10px;">
        <el-pagination background @current-change="GetList" @prev-click="GetList" @next-click="GetList" layout="prev, pager, next" :page-size="page.pageSize" :total="page.total"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { DateFormat } from '@/utils/tools'
import {sppapp_report} from "@/api/sspreport";
import {sppapp_all} from "@/api/sspapp";
export default {
  name: 'ssp-report',
  data(){
    return {
      isSubS:false,
      search:{
        stime:'',
        etime:'',
        media_ids:[],
      },
      page:{
        pageSize:20,
        total:0
      },
      app_all:[],
      tableData:[],
      sectimes:[new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 1 ),new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 1 )],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  computed: {},
  components: {},
  mounted(){},
  created() {
    this.GetList()
  },
  methods: {
    getappall(){
      if (this.app_all.length > 0 ){
        return
      }
      sppapp_all({}).then(res => {
        var data = res.data
        console.log(data)
        this.app_all = data
      }).catch(err => {
        console.log(err)
      })
    },
    //获取列表
    GetList(val){
      this.isSubS = true
      var param = this.search
      param.page_size = this.page.pageSize
      if (val > 0){
        param.page = val
      }
      param.stime = DateFormat(this.sectimes[0],'YYYY-mm-dd')
      param.etime = DateFormat(this.sectimes[1],'YYYY-mm-dd')
      sppapp_report(param).then(res => {
        var data = res.data
        this.tableData = data.list
        this.page.total = data.total
        this.isSubS = false
      }).catch(err => {
        console.log(err)
        this.isSubS = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.task-manage-container {
  .el-table{
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    ::v-deep .el-table__header tr th{
      background: #f5f5f5;
    }
  }
}
.search-line{
  margin: 0px;
  display: flex;
  align-items: center;
}
.search-line > div {
  margin-right: 10px;
}

.drawer-all {
  margin: 0 10px;
  height: calc(100vh - 80px);
  overflow: auto;
}
.drawer-contain {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 10px;
}
.drawer-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 10px;
  border: 1px solid #eaeaea;
}
.drawer-line-title {
  font-size: 14px;
  font-weight: bold;
  margin: 10px 0;
}
.drawer-line-chk {
  margin: 10px 10px 10px 0;
  width: 150px;
}
.right-title {
  width: 260px;
  border-left: 1px solid #eaeaea;
  text-align: left;
  padding: 12px;
}
.right-box-tips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 6px;
  font-size: 12px;
  color: #919191;
}
.right-box-tips span {
  cursor: pointer;
  color: #409EFF;
}
.right-box {
  width: 260px;
  padding: 5px;
  border: 1px solid #efefef;
  border-top: none;
  min-height: calc(100vh - 120px);
}
.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  min-height: 20px
}
.list-group-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  margin-bottom: 2px;
  width: 240px;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.125);
  cursor: all-scroll;
  border-radius: 5px;
}
.drawer-contain-left {
  flex: 1;
  margin: 10px 20px;
}
.close-icon {
  margin-left: 10px;
  color: #989898;
  cursor: pointer;
}
.close-icon :hover {
  color: #409EFF;
}
</style>